<template>
  <div class="search-results">
    <input
      v-model="searchQuery"
      type="text"
      placeholder="输入关键字"
      @keyup.enter="updateHighlightedResults"
    />
    <ul>
      <li v-for="(item, index) in listData" :key="index">
        <!-- 使用 v-html 动态渲染高亮后的标题 -->
        <span v-html="item.highlightedTitle"></span>
      </li>
    </ul>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'

// 示例数据
const searchResults = ref([
  { title: 'Vue 3 快速上手指南' },
  { title: '如何在 Vue 项目中使用 Composition API' },
  { title: 'Vue3 与 Vue2 的主要区别' },
  { title: 'JavaScript 高级教程' }
])

const listData = ref([])
onMounted(() => {
  updateHighlightedResults()
})

// 搜索关键字
const searchQuery = ref('')

const updateHighlightedResults = () => {
  // 当输入框内容发生变化时，重新计算高亮结果
  listData.value = []
  if (!searchQuery.value) {
    // 如果没有输入关键字，直接返回原始数据
    listData.value = searchResults.value.map((item) => ({
      ...item,
      highlightedTitle: item.title
    }))
  } else {
    const query = searchQuery.value.trim()
    const regex = new RegExp(`(${query})`, 'gi') // 构建正则匹配关键字（忽略大小写）

    listData.value = searchResults.value.map((item) => {
      // 高亮关键字，将匹配到的部分包裹在 <span> 中
      const highlightedTitle = item.title.replace(regex, '<span style="color:#ff5722;">$1</span>')
      return {
        ...item,
        highlightedTitle // 添加高亮后的标题
      }
    })
  }
}
</script>
<style scoped>
.search-results {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

input {
  width: 100%;
  padding: 8px;
  margin-bottom: 16px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}
</style>
